<%@page contentType="text/html;charset=utf-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>tree示例</title>
		<cw:base />
		<script>
			var jsonTree = 
				[
				{"id":100,"text":"北京市","qtip":"","expanded":false,"leaf":false,"cls":"folder",
					"children":[
						{"id":101,"text":"东城区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
						{"id":102,"text":"西城区","qtip":"","expanded":false,"leaf":true,"cls":"file"}
					]
				},
				
				{"id":200,"text":"上海市","qtip":"","expanded":false,"leaf":false,"cls":"folder",
					"children":[
							{"id":201,"text":"徐汇区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
							{"id":202,"text":"黄浦区","qtip":"","expanded":false,"leaf":true,"cls":"file"}
						]
					},
					
					{"id":440000,"text":"广东省","qtip":"","expanded":false,"leaf":false,"cls":"folder",
						"children":[
							{"id":440100,"text":"广州市","qtip":"","expanded":false,"leaf":false,"cls":"folder",
								"children":[
								{"id":440103,"text":"荔湾区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440104,"text":"越秀区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440105,"text":"海珠区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440106,"text":"天河区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440111,"text":"白云区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440112,"text":"黄埔区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440113,"text":"番禺区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440114,"text":"花都区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440115,"text":"南沙区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440116,"text":"萝岗区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440183,"text":"增城市","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440184,"text":"从化市","qtip":"","expanded":false,"leaf":true,"cls":"file"}
								 ]
							},
					
							{"id":440300,"text":"深圳市","qtip":"","expanded":false,"leaf":false,"cls":"folder",
								"children":[
								{"id":440303,"text":"罗湖区","qtip":"","expanded":false,"leaf":false,"cls":"folder",
									"children":[
										{"id":440303001,"text":"桂园街道","qtip":"","expanded":false,"leaf":false,"cls":"folder",
											"children":[
												{"id":440303001001,"text":"桂木园社区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
												{"id":440303001002,"text":"人民桥社区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
												{"id":440303001003,"text":"鹿丹村社区","qtip":"","expanded":false,"leaf":true,"cls":"file"}
											 ]
										},
										{"id":440303002,"text":"东晓街道","qtip":"","expanded":false,"leaf":true,"cls":"file"},
										{"id":440303003,"text":"南湖街道","qtip":"","expanded":false,"leaf":true,"cls":"file"}
								    ]
								},
								{"id":440304,"text":"福田区","qtip":"","expanded":false,"leaf":false,"cls":"folder",
									"children":[
										{"id":440304001,"text":"福田街道","qtip":"","expanded":false,"leaf":true,"cls":"file"},
										{"id":440304002,"text":"梅林街道","qtip":"","expanded":false,"leaf":true,"cls":"file"},
										{"id":440304003,"text":"华强北街道","qtip":"","expanded":false,"leaf":true,"cls":"file"}
									]
								},
								{"id":440305,"text":"南山区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440306,"text":"宝安区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440307,"text":"龙岗区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440308,"text":"盐田区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440309,"text":"光明新区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440310,"text":"坪山新区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440311,"text":"大鹏新区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":440312,"text":"龙华新区","qtip":"","expanded":false,"leaf":true,"cls":"file"}
								 ]
							}
						]
					}
				]
								 	 
			//加载前的数据操作
			function treeBeforeLoad(treeLoader, node) {
				this.baseParams.pid = node.id;
			}
			//点击树节点的操作
			function treeClick(node, e) {
				alert(node.id);
			}
			//当树节点改变时的操作
			function treeCheckChange(node, checked) {
				alert(node.text + "," + checked);
			}
		</script>
	</head>
	<body>
		<ul>
			<li>
				<table width="98%">
					<colgroup>
						<col width='25%'>
						<col width='25%'>
						<col width='25%'>
						<col width='25%'>
					</colgroup>
					<tr>
						<td>
							数据来源本页面:
							<cw:tree rootText="行政区划" rootVisible="true" data="jsonTree" width="95%" height="200" />
						</td>
						<td>
							数据来源是文件:
							<cw:tree url="${pageContext.request.contextPath }/sample/component/demotree/data.json" width="95%" height="200" />
						</td>
						<td>
							一次性加载节点数据:
							<cw:tree url="${pageContext.request.contextPath}/demoform/loadFullTreeSelect.action" width="95%" height="200" />
						</td>
						<td>
							逐层加载节点数据:
							<cw:tree url="${pageContext.request.contextPath}/demoform/loadCheckTreeSelect.action" width="95%" height="200" />
						</td>
					</tr>
				</table>
				<br>
			</li>
			<li>
				<table width="98%">
					<colgroup>
						<col width='25%'>
						<col width='25%'>
						<col width='25%'>
						<col width='25%'>
					</colgroup>
					<tr>
						<td>
							初始展开层次:
							<cw:tree url="${pageContext.request.contextPath}/demoform/loadCheckTreeSelect.action" width="95%" height="200" level="2" />
						</td>
						<td>
							节点点击后的事件（onClick）:
							<cw:tree rootText="hello" data="jsonTree" rootVisible="false" width="95%" height="200" onClick="treeClick" />
						</td>
						<td>
							多选树节点选择的事件（treeCheckChange）：
							<cw:tree url="${pageContext.request.contextPath}/demoform/loadFullTreeSelect.action" rootVisible="false" width="95%" height="200"
								onCheckChange="treeCheckChange" />
						</td>
						<td></td>
					</tr>
				</table>
				<br>
			</li>
		</ul>
		<script type="text/javascript" src="${pageContext.request.contextPath}/resource/scripts/treefix.js"></script>
		<script type="text/javascript">
			Ext.onReady(function(){
				resetHeight("normalTreeFrame");
			})
		
			function resetHeight(frame) {
				var ifm = parent.document.getElementById(frame);
				var obj = document.body;
				var oStyle = obj.currentStyle? obj.currentStyle : window.getComputedStyle(obj, false);
				var initHeight = parseInt(document.body.clientHeight+parseInt(oStyle["margin-top"])+parseInt(oStyle["margin-bottom"]));
				ifm.height = parseInt(initHeight);
			}
		</script>
	</body>
</html>
